import {memo, useCallback, useState} from "react";

const Input = memo(function Input({onChange}) {
    console.log('子组件渲染')
    return <input type={"text"} onChange={e => onChange(e.target.value)} />
})

function App() {
    // useCallback 缓存函数 父组件更新时 子组件不会重新渲染
    const changeHandler = useCallback((value) => console.log('value: ', value), [])
    const [count, setCount] = useState(0)

    return (
        <div className="App">
            <Input onChange={changeHandler} />
            <button onClick={() => setCount(count + 1)}>count: {count}</button>
        </div>
    )
}

export default App;
